<template>
  <div class="ttable1">
    <div class="ttable">
      <table>
        <tr>
          <th>
            <img
              src="http://p4.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg?param=100y100"
              alt=""
            />
            <span style="position:relative;bottom:60px;font-size:15px;margin-left:5px">飙升榜</span>
  
          </th>
        </tr>
        <td
          v-for="(list, item) in dislist"
          :class="{ active12: item % 2 != 0 }"
        >
          <span @click="toLyric(list.id)" style="cursor:pointer">{{ item + 1 }}.{{ list.name }}  </span>
             <i class="el-icon-video-play" @click="playMusic(list.id)">
               </i>
        </td>
        <td><span style="float:right;cursor: pointer;" @click="toT('B')">查看全部></span></td>
      </table>
    </div>
    <div class="ttable">
      <table>
        <tr>
          <th>
            <img
              src="http://p4.music.126.net/N2HO5xfYEqyQ8q6oxCw8IQ==/18713687906568048.jpg?param=100y100"
              alt=""
            />
             <span style="position:relative;bottom:60px;font-size:15px;margin-left:5px">新歌榜</span>
          </th>
        </tr>
        <td
          v-for="(list, item) in dislist"
          :class="{ active12: item % 2 != 0 }"
        >
           {{ item + 1 }}.{{ list.name }}<i class="el-icon-video-play" @click="playMusic(list.id)">
               </i>
        </td>
          <td><span style="float:right;cursor: pointer;" @click="toT('X')">查看全部></span></td>
      </table>
    </div>
    <div class="ttable">
      <table>
        <tr>
          <th>
            <img
              src="http://p3.music.126.net/sBzD11nforcuh1jdLSgX7g==/18740076185638788.jpg?param=100y100"
              alt=""
            />
           <span style="position:relative;bottom:60px;font-size:15px;margin-left:5px">原创榜</span>

          </th>
        </tr>
        <td
          v-for="(list, item) in dislist"
          :class="{ active12: item % 2 != 0 }"
        >
        {{ item + 1 }}.{{ list.name }}<i class="el-icon-video-play" @click="playMusic(list.id)">
               </i>
        </td>
          <td><span style="float:right;cursor: pointer;" @click="toT('C')">查看全部></span></td>
      </table>
    </div>
     <div class="player">
      <!-- autoplay 自动播放 -->
      <audio :src="musicUrl" controls autoplay class="player_audio" ></audio>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    dislist: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data(){
    return{
      musicUrl:""
    }
  },
  methods:{
    toT(tag){
      if(tag=='B')this.$router.push('/discover/toplist/biaosheng')
        if(tag=='X')this.$router.push('/discover/toplist/newsongs')
        if(tag=='Y')this.$router.push('/discover/toplist/original')
    }
  }
};
</script>
<style>
.active12 {
  background-color: #fff;
}
.ttable1 {
  width: 690px;
  margin-top: 20px;
}
.ttable {
  float: left;
  width: 230px;
  height: 120px;
}
.ttable tr {
    height:100px;
    width: 211px;

}
.ttable img {
  width: 80px;
  height: 80px;
  margin-left: -50px;
}
.ttable table {
  width: 100%;
}

th {
  height: 50px;
  width: 230px;
}
.ttable td {
  display: block;
  width: 100%;
  height: 32px;
  line-height: 32px;
}
.ttable table {
  border: solid 1px;
  background-color: rgb(244, 244, 244);
}
</style>